@extends('backend::common.common_right')
@section('content')
    <style>
        #file {position: absolute;left: 0;width: 100%;height: 100%;top: 0;opacity: 0;z-index: 2;cursor: pointer;}
        #show_img{border:1px solid #eee;width:100%;height: 100%;}
        .lazy{width:500px;}
    </style>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="position: relative;">
                        <div class=" row m-b-sm m-t-sm" >
                        <div class="col-md-9" >
                        <label class="col-sm-4 control-label">采集论坛案例：</label>
                            <div class="input-group" style="text-align: center">
                                <input type="text" id="seachname" placeholder="请输入论坛帖子地址" name="url"
                                       class="form-control">
                                <span class="input-group-btn">
                                <button type="button" onclick="query()" class="btn  btn-primary">采集</button>
                            </div>
                        </div>
                        <div class="ibox-tools" style="position: absolute;right: 15px;top:15px;">
                            <a class="close-link" href="javascript:history.go(-1);" >
                                <i class="fa fa-times" ></i>
                            </a>
                        </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" onsubmit="removeSrc()" action="{{url('backend/articleedit')}}" method="post" id="signupForm">
                            {{ csrf_field() }}
                            <input type="hidden" name="id" value="{{$article->id or ''}}">
                            <input type="hidden" name="type" value="2">
                            <div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
                                <label class="col-sm-3 control-label">案例标题：</label>
                                <div class="col-sm-8">
                                    <input type="text" value="{{ $article->title or '' }}" name="title" class="form-control" placeholder="标题" id="title">
                                    @if ($errors->has('title'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('title') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
                                <label class="col-sm-3 control-label">文件地址：</label>
                                <div class="col-sm-5">
                                    <input type="text" value="{{ $article->file or '' }}" id="resfile" name="file" class="form-control" placeholder="点击按钮生成压缩包文件" id="title">
                                    @if ($errors->has('title'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('title') }}</strong>
                                    </span>
                                    @endif
                                </div>
                                <span><a href="javascript:;" onclick="pclzip()" class="btn btn-primary ">生成压缩文件</a></span>
                            </div>
                            <div class="form-group{{ $errors->has('image') ? ' has-error' : '' }}" >
                                <label class="col-sm-3 control-label">图片：</label>
                                <div class="col-sm-8" >
                                    <input type="text" name="image" class="form-control" id="savedpath" value="{{$article->image or ''}}">
                                    @if ($errors->has('image'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('image') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('cat_id1') ? ' has-error' : '' }}" >
                                <label class="col-sm-3 control-label">模型分类：</label>
                                <div class="col-sm-8">
                                    <div class="col-sm-6 row">
                                        <select class="form-control catsshow" name="cat_id1">
                                            <option value="">全部</option>
                                            @foreach($cats[$type] as $ca)
                                                <option value="{{$ca->id}}"@isset($article) @if($article->cat_id1 == $ca->id) selected @endif @endisset >{{$ca->catname}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    @foreach($cats[$type] as $c)
                                        <div class="col-sm-6 row catrow cats2show{{$c->id}}"
                                             @isset($article) @if($article->cat_id1 == $c->id)style="display:block" @else style="display:none"  @endif @else style="display:none"  @endisset >
                                            <select class="form-control" name="cat_id2" onchange="changeCatid(this.value)">
                                                @foreach($cats[$c->id] as $ca2)
                                                    <option @isset($article) @if($article->cat_id2 == $ca2->id) selected @endif @endisset value="{{$ca2->id}}">{{$ca2->catname}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endforeach
                                </div>
                                @if ($errors->has('cat_id1'))
                                    <span class="help-block">
                            <strong>{{ $errors->first('cat_id1') }}</strong>
                            </span>
                                @endif
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">设计风格：</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="style">
                                        @foreach($style as $style)
                                            <option @isset($article->style) @if($article->style == $style->id) selected @endif @endisset value="{{$style->id}}">{{$style->catname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">是否展示：</label>
                                <div class="col-sm-8">
                                    <label class="radio-inline">
                                        <input type="radio" checked="" value="1" id="optionsRadios1" name="status">展示</label>
                                    <label class="radio-inline">
                                        <input type="radio" @isset($article->status) @if($article->status == '0')checked @endif @endisset value="0"  name="status">隐藏</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-2">
                                    <script type="text/plain" id="myEditor" name="content" style="width:100%;height:240px;">
                                    </script>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link href="{{ URL::asset('admin/js/plugins/ueditor/themes/default/css/umeditor.css')}}" rel="stylesheet">
    <script  src="{{ URL::asset('admin/js/plugins/ueditor/third-party/jquery.min.js')}}"></script>
    <script  charset="utf-8" src="{{ URL::asset('admin/js/plugins/ueditor/umeditor.config.js')}}"></script>
    <script  charset="utf-8" src="{{ URL::asset('admin/js/plugins/ueditor/umeditor.min.js')}}"></script>
    <script  charset="utf-8" src="{{ URL::asset('admin/js/plugins/ueditor/lang/zh-cn/zh-cn.js')}}"></script>
    <script src="{{URL::asset('admin/js/jquery.lazyload.js')}}"></script><script>
        var um = UM.getEditor('myEditor');
        @isset($article->id)
        @if($article->id > 0)
            um.ready(function() {
                $('#myEditor').contents().html(`{!!$article->content!!}`);
                $('#myEditor').contents().find('img.lazy').lazyload({effect: "fadeIn", skip_invisible: "true"});
            })
        @endif
        @endisset
        $('.catsshow').change(function(){
            var id = $(".catsshow option:selected").val();
            $(".catrow").hide();
            $('.cats2show'+id).show();
            $("select[name='cat_id2']").val($('.cats2show'+id+' select option').first().val());
        });
        @isset($article->cat_id2)
        $("select[name='cat_id2']").val('{{$article->cat_id2}}')
        @endisset
        var pclzip = function(){
                var images = [] ;
                $('img').each(function (i,e) {
                    images.push($(e).attr('data-original'));
                });
                $.ajax({
                    url: "/backend/zip",
                    type: "POST",
                    data: {'images':images,'_token':'{{csrf_token()}}'},
                    dataType: "json",
                    async: false,
                    success: function (res) {
                        $("#resfile").val(res.resfile);
                    },
                    error:function (res) {
                        console.log(res)
                    }
                });
            }
        var changeCatid = function (value) {
            $("select[name='cat_id2']").val(value);
        }
        var query = function(){
           var url =  $("input[name='url']").val();
           $.ajax({
               url: "/backend/query",
               type: "POST",
               data: {'url':url,'_token':'{{csrf_token()}}'},
               async: false,
               success: function (res) {
                   $("#title").val(res.title);
                   $("#myEditor").contents().html(res.content);
                   $("#myEditor").contents().find('*').remove('strong,br,h3,em,p.xg1.y,p:empty,p:has(a)').removeAttr('id aid src style onclick width inpost onmouseover class _src file');
                   $("#myEditor").contents().find('li,img,p').unwrap();
                   var html = $('#myEditor').contents().html().replace(/zoomfile/g,'class="lazy" data-original');
                   $("#myEditor").contents().html(html);
                   $('#myEditor').contents().find('img.lazy').lazyload({effect: "fadeIn",skip_invisible:"true"});
                   console.log($("#myEditor").contents().html())
               },
               error:function (res) {
                   console.log(res)
               }
           })
        }
        var  removeSrc = function () {
            var um = UM.getEditor('myEditor');
            var html2 = $('#myEditor').contents().html();
            um.setContent(html2);
        };
    </script>

@endsection